<template>
  <!--
      	作者：joey
      	时间：2024-03-20
      	描述：商品标记
      -->
    <div>
        <!--搜索表单-->
        <div class="common-seach-wrap">
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="请输入标记名称">
                    <el-input v-model="formInline.name" placeholder="请输入标记名称"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker v-model="formInline.create_time" type="daterange" value-format="yyyy-MM-dd"
                                        range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="mb16">
                <div class="common-level-rail fl">
                    <el-button size="small" type="primary" icon="el-icon-plus" @click="addMark">添加标记</el-button>
                </div>
            </div>
        </div>
        <div class="table-wrap">
            <el-table :data="categoryData" style="width: 100%" v-loading="loading">
                <el-table-column prop="name" label="标记名称"></el-table-column>
                <el-table-column prop="" label="图片">
                  <template slot-scope="scope">
                    <img v-img-url="scope.row.icon" alt="" width="50px" />
                  </template>
                 </el-table-column>
                <el-table-column prop="describe" label="标记描述"></el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status==0" class="gray">隐藏</span>
                    <span v-if="scope.row.status==1" class="red">显示</span>
                  </template>
                </el-table-column>
                <el-table-column prop="status_text" label="审核" width="120">
          <template slot-scope="scope">
            <p :class="['audit-'+scope.row.audit_status]">{{
                scope.row.audit_status == 0 ? '待审核' : (scope.row.audit_status == 1 ? '已通过' : '未通过')
              }}</p>
          </template>
        </el-table-column>
                <el-table-column prop="create_time" label="添加时间" width="180"></el-table-column>
                <el-table-column prop="sort" label="排序号" width="80"></el-table-column>
                <el-table-column prop="name" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button
              v-if="scope.row.audit_status != 1"
              @click="auditClick(scope.row)"
              type="text"
              size="small"
              >审核</el-button
            >
                        <el-button @click="editMark(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteMark(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--添加-->
            <Add v-if="open_add" :open_add="open_add" @closeDialog="closeDialogFunc($event, 'add')"></Add>

            <!--编辑-->
            <Edit v-if="open_edit" :open_edit="open_edit" :editform="userModel"
                  @closeDialog="closeDialogFunc($event, 'edit')"></Edit>
        
                   <!--审核-->
      <Audit
        v-if="open_audit"
        :open_audit="open_audit"
        :auditform="userModel"
        :title="title"
        :AuditApi="AuditApi"
        :pk="pk"
        :ids="batchIds"
        @closeDialog="closeDialogFunc($event, 'audit')"
      ></Audit>

        <!--分页-->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                       :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                       :total="totalDataNumber"></el-pagination>
        </div>

        </div>
    </div>
</template>

<script>
    import MarkApi from '@/api/productMark.js';
    import Edit from './part/Edit.vue';
    import Add from './part/Add.vue';
    import {deepClone} from '@/utils/base.js';
    import Audit from "@/components/audit/Audit.vue";
    export default {
        components: {
            /*编辑组件*/
            Edit,
            Add,
            Audit
        },
        data() {
            return {
                /*分类*/
                categoryData: [],
                /*是否打开添加弹窗*/
                open_add: false,
                /*是否打开编辑弹窗*/
                open_edit: false,
                /*当前编辑的对象*/
                userModel: {},
                commentData: [],
                /*是否加载完成*/
                loading: true,
                /*横向表单数据模型*/
                formInline: {
                    name: '',
                },
                /*列表数据*/
                tableData: [],
                /*一页多少条*/
                pageSize: 20,
                /*一共多少条数据*/
                totalDataNumber: 0,
                /*当前是第几页*/
                curPage: 1,
                /*是否打开审核弹窗*/
                open_audit: false,
                pk: "id",
                title: "审核",
                /*接口*/
                AuditApi: MarkApi,
                batchIds: [],
                /*选中的数据*/
                multipleSelection: [],
            }
        },
        created() {
            /*获取文章列表*/
            this.getTableList();

        },
        methods: {
            /*打开审核*/
            auditClick(item) {
                this.userModel = deepClone(item);
                this.open_audit = true;
            },
          
           /*获取列表*/
           getTableList() {
                let self = this;
                let Params = self.formInline;
                Params.page = self.curPage;
                Params.list_rows = self.pageSize;
                MarkApi.MarkList(Params, true)
                    .then(data => {
                        self.loading = false;
                        self.categoryData = data.data.list.data;
                        self.totalDataNumber = data.data.list.total;
                    })
                    .catch(error => {
                        self.loading = false;
                    });
            },

            /*删除*/
            deleteMark(row) {
                let self = this;
                self.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() =>
                {
                    self.loading = true;
                    MarkApi.deleteMark({
                        id: row.id
                    }, true)
                        .then(data =>
                        {
                            self.loading = false;
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            self.getTableList();

                        })
                        .catch(error =>
                        {
                            self.loading = false;
                        });

                }).catch(() =>
                {

                });
            },

            /*打开添加*/
            addMark() {
                this.open_add = true;
            },

            /*打开编辑*/
            editMark(item) {
                this.userModel = deepClone(item);
                this.open_edit = true;
            },

            /*关闭弹窗*/
            closeDialogFunc(e, f) {
                if (f == 'add') {
                    this.open_add = e.openDialog;
                    if (e.type == 'success') {
                        this.getTableList();
                    }
                }
                if (f == 'edit') {
                    this.open_edit = e.openDialog;
                    if (e.type == 'success') {
                        this.getTableList();
                    }
                }
                if (f == "audit") {
                    this.open_audit = e.openDialog;
                    if (e.type == "success") {
                    this.getTableList();
                    }
                }
            },
            /*选择第几页*/
            handleCurrentChange(val) {
                let self = this;
                self.curPage = val;
                self.loading = true;
                self.getTableList();
            },

            /*每页多少条*/
            handleSizeChange(val) {
                this.curPage = 1;
                this.pageSize = val;
                this.getTableList();
            },

            /*搜索查询*/
            onSubmit() {
                let self = this;
                self.loading = true;
                let Params = self.formInline;
                self.getTableList();
            },
        }
    }
</script>

<style>
.audit-0 {
  color: rgb(192, 196, 204);
  cursor: pointer;
}

.audit-1 {
  color: green;
}

.audit-2 {
  color: red;
  cursor: pointer;
}
</style>
